<template>
  <nly-content-wrapper>
    <nly-content-header>
      <nly-row class="col-12">
        <nly-row class="col-12 ">
          <nly-col
            class="form-inline"
          >
            <form-select
              title="类型"
              class="ml-2"
              addDefaultText="全部"
              rightStyle="width:120px;"
              v-model="historyPostData.code"
              :dataList="agreementType"
            ></form-select>
            <form-input
              title="内容"
              rightStyle="width:120px;"
              class="ml-2"
              v-model="historyPostData.content"
            ></form-input>
          </nly-col>
          <div
          >
            <nly-button-group>
              <a-button type="primary" class="crm-btn" @click="ListHistory">查询</a-button>
              <a-button type="primary" class="crm-btn" @click="reset">重置</a-button>
              <a-button type="primary" class="crm-btn" @click="List">最新协议</a-button>
            </nly-button-group>
          </div>
        </nly-row>
      </nly-row>
      <div class="tabpanel_tab_spacer"></div>
    </nly-content-header>
    <nly-content>
      <!-- 列表 -->
      <a-table
        :columns="columns"
        :components="components"
        :data-source="data"
        :scroll="{ x: 500, y: 500}"
        style="height: calc(100vh - 15rem);"
        bordered
        :pagination="false"
      >
      <a slot="formatTitle" slot-scope="text, record" @click="EdiItem(record)" class="goToDetail">
          {{text}}
      </a>
      </a-table>
      <!-- modal 弹窗  -->
      <a-modal v-model="eidtModelShow" centered on-ok="handleok" :title="form.id ? '编辑' : '新增'" width="960px">
        <div id="components-form-demo-advanced-search">
          <a-form
            class="ant-advanced-search-form"
            :form="form"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 18 }"
            @submit="handleSubmit"
          >
            <a-row :gutter="24">
              <a-col :span="15" :pull="3">
                <a-form-item label="协议类型">
                  <form-select 
                    labelStyle="display:none;"
                    rightStyle="width:100%;"
                    class="ml-1 mb-2"
                    v-model="form.code"
                    :valueTitle.sync="form.title"
                    :dataList="agreementType"
                    :disabled="true"
                    >
                  </form-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24" :pull="6">
                <a-form-item label="内容">
                  <div ref="editor" style="text-align:left" class="editer"></div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template slot="footer">
          <a-button  type="primary" html-type="submit" @click="handleSubmit">保存</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="() => (eidtModelShow = false)">关闭</a-button>
        </template>
      </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>

import { list,historyList,save } from "@/api/agreement";
import { components } from "@/utils/antTableComponents";
import { createEditor } from "@/utils/wangEditer";

export default {

  data() {
    const columns = [
       {
        title: "协议名称",
        dataIndex: "title",
        key: "title",
        width: 120,
        scopedSlots: { customRender: 'formatTitle' },
      },
      {
        title: "更新人",
        dataIndex: "createUserName",
        key: "createUserName",
        width: 120
      },
      {
        title: "更新时间",
        dataIndex: "createDate",
        key: "createDate",
        width: 120
      },
    ];
    //协议 类型
    const agreementType = [
      { key: "user", title: '用户协议' },
      { key: "privacy", title: '隐私协议' },
      { key: "share", title: '分享协议' },
    ];
    //表格 头部 可伸缩
    this.components = components(columns);
    return {
      columns,
      agreementType,
      pagination: { //分页信息
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems: true
      },
      data:[],
      form : {},          //表单
      show: false,        //是否显示
      eidtModelShow:false,//新增/编辑弹窗 显示
      selectedKeys: [],   //table选中key
      selectedData: [],   //table选中集合
      editor:null,        //富文本
      editorContent:"",    //富文本内容（HTML）
      editorContentText:'', //富文本内容(纯文字)
      historyPostData: {
        code:'',
        content:''
      }
    };
  },
  created(){
    this.ListHistory();
  },
  activated() {
    this.ListHistory();
  },
  methods: {
    //添加
    AddItem() {
      this.from = {};
      this.eidtModelShow = true;
      const {editor} = this;
      if(!editor){
        this.$nextTick(function () {
          let div =  this.$refs["editor"];
          let editorOnChange = (html) => {
            console.log("保存富文本：",html);
            this.editorContent = html
          }
          let newEditor = createEditor(div,editorOnChange);
          console.log("f富文本editor",newEditor)
          this.editor = newEditor;
          this.editor.txt.html("");
        });
      }else {
        this.editor.txt.html("");
      }
    },
    //编辑
    EdiItem(row) {
      console.log(row);
      if(!row) {
        if (this.selectedData.length != 1) {
          this.$message.warn("请选择一条数据");
          return false;
        }else {
          this.form = {...this.selectedData[0]};
        }
      }else {
        this.form = {...row};
      }
    
      this.eidtModelShow = true;
      const {editor} = this;
      if(!editor){
        this.$nextTick(function () {
          let div =  this.$refs["editor"];
          let editorOnChange = (html) => {
            console.log("保存富文本：",html);
            this.editorContent = html
          }
          let newEditor = createEditor(div, editorOnChange);
          console.log("f富文本editor",newEditor)
          this.editor = newEditor;
          this.editor.txt.html(this.form.content);
        });
      }else {
        //文本框赋值
        this.editor.txt.html(this.form.content);
      }
      this.editorContent = this.form.content;
    },
    // 获取列表
    List() {
      list().then(response => {
        if (response.code === 200) {
            const { data } = response;
            this.data = data;
          }
        }).catch(error => {});
    },
     // 获取 历史列表
    ListHistory(){
        const {historyPostData} = this;
        historyList(historyPostData).then(response => {
        if (response.code === 200) {
            const { data } = response;
            this.data = data;
          }
        }).catch(error => {});
    },
    //获取
    showFunction() {
      this.show = !this.show;
    },
    //表单重置
    handleReset() {
      this.editorContent = '';
      this.editor.txt.html("");
    },
    //保存协议
    handleSubmit(e) {
      const { editorContent, editor} = this;
      let text = editor.txt.text();
      console.log("富文本纯文字：",text)
      e.preventDefault();
      if(!text){
        this.$message.warn("协议内容不能为空");
        return false;
      }
      this.form.content = this.editorContent;
      save(this.form)
      .then(response => {
        if (response.code === 200) {
          this.$message.success("保存成功");
          //刷新 列表
          this.List();
          this.selectedKeys = [];
          this.eidtModelShow = false;
        }
      })
    },

    reset() {
      Object.assign(this.historyPostData,{
        code:'',
        content:''
      })
      this.ListHistory();
    },
    //报表table选择
    selection(keys, info) {
      this.selectedKeys = keys;
      this.selectedData = info;
    },
  },
  watch: {}
};
</script>
<style scoped>
.editer >>> .w-e-menu {
  padding: 5px 9px;
}

.form-inline label {
  justify-content: left !important;
}
.form-inline > .col {
  margin-bottom: 1.5rem !important;
}
.icons-list >>> .anticon {
  margin-right: 8px;
  font-size: 16px;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

/* tile uploaded pictures */
.upload-list-inline >>> .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}
.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
.ant-popover-inner {
  z-index: 2999;
}
.crm-btn {
  margin-left: 10px;
  margin-bottom: 10px;
}
.div-line{
  width: 100%; 
  height: 2px; 
  background: #1890ff;

}
.search-bn{
  width: 80px;
  height: 35px;
  margin-left: 15px;
  display:block; 
  text-align: center;
  line-height: 35px;
  float: left;
  cursor: pointer;
}
</style>
